<!DOCTYPE html>
<html lang="zxx">

<head>
    <!-- METATAG -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="resume, cv, portfolio, personal,personal resume, modern" />
    <meta name="author" content="Rama Hardian" />
    <!-- TITLE PAGE -->
    <title>Miun - Personal Page | Project single</title>
    <!-- BOOTSTRAP CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- FONTAWESOME CSS -->
    <link href="css/fontawesome.css" rel="stylesheet">
    <!-- GOOGLE FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700;900&display=swap" rel="stylesheet">
    <!-- AOS CSS -->
    <link href="css/aos.css" rel="stylesheet">
    <!-- OWL CAROUSEL CSS -->
    <link href="css/owl.carousel.min.css" rel="stylesheet">
    <link href="css/owl.theme.default.min.css" rel="stylesheet">
    <!-- MAGNIFIC CSS -->
    <link href="css/magnific.css" rel="stylesheet">
    <!-- THEMES CSS -->
    <link href="css/themes.css" rel="stylesheet">
    <!-- RESPONSIVE CSS -->
    <link href="css/responsive-style.css" rel="stylesheet">
</head>

<body>
    <!-- MAIN WRAP PAGE -->
    <main id="kalpax-mainwrap">
        <!-- PRELOADER -->
        <div class="wrap-load">

            <div class="img-logo-load">
                <div class="progress">
                    <div class="line"></div>
                </div>
                <img src="image/asset/logo.png" alt="logo" />
            </div>
        </div>
        <!-- END PRELOADER -->
        <!-- MAIN HEADER PAGE -->
        <header id="header" class="main-kalpaxheader">
            <div class="container">
                <div class="row">
                    <!-- LOGO WRAP -->
                    <div class="col-lg-12 position-relative">
                        <a href="/" class="logo-kalpax"><img src="image/asset/logo.png" alt="logo" /> </a>
                        <!-- LANG WRAP -->
                        <div class="lang">
                            <ul>
                                <li><a href="#">ENG</a></li>
                                <li><a href="#">IDN</a></li>
                            </ul>
                        </div>
                        <!-- END LANG WRAP -->
                        <!-- BURGER MENU WRAP -->
                        <div class="kalpax-burger-menu">
                            <span></span>
                        </div>
                        <!-- END BURGER MENU WRAP -->
                    </div>
                    <!-- END LOGO WRAP -->
                </div>
                <!-- NAVIGATION PAGE -->
                <div class="menuContent  justify-content-center">
                    <ul>
                        <li class="submenulink">
                            <a class="vlink" href="#">Home
                                <i class="fa fa-chevron-down"></i>
                            </a>
                            <ul class="submenu">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="index-2.html">Home Two</a></li>
                            </ul>
                        </li>
                        <li><a class="vlink" href="about.html">About me</a></li>
                        <li class="submenulink"><a class="vlink" href="#">Project
                            <i class="fa fa-chevron-down"></i>

                        </a>
                            <ul class="submenu">
                                <li><a href="project.html">Project Modern</a></li>
                                <li><a href="project-grid.html">Project grid </a></li>
                                <li><a href="project-masonry.html">Project masonry </a></li>
                                <li><a href="#">Project single </a></li>
                            </ul>
                        </li>
                        <li class="submenulink">
                            <a class="vlink" href="#">Other Page
                                <i class="fa fa-chevron-down"></i>
                            </a>
                            <ul class="submenu">
                                <li><a href="team.html">Team</a></li>
                                <li><a href="404.html">404 Page</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                            </ul>
                        </li>
                        <li><a class="vlink" href="#">Contact</a></li>


                    </ul>
                </div>
                <!-- END NAVIGATION PAGE -->
            </div>
        </header>
        <!-- END MAIN HEADER PAGE -->
        <div class="head-section jarallax" style="background: url(./image/asset/8.jpg); ">
            <div class="container-fluid pl-0 pr-0">
                <div class="row">
                    <div class="col">

                        <div class="bg-fog-section"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- PROJECT SINGLE CONTENT PAGE SECTION -->
        <section id="contain-kalpax-fixed" class="porto-wr">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 kalpax-project-main">
                        <div class="kalpax-projectsinglepage-wrapper">
                            <div class="back">
                                <a href="project.html">— Back</a>
                            </div>
                            <h5>CLIENT PROJECT</h5>
                            <h3 class="title-h3 pt-3 pb-3">Selected Projects.
                            </h3>
                            <p class="detail-mini">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
                            <p class="mb-detail">CLIENT</p>
                            <p class="detail-innermini mt-0">PT Jangkrik Bosqu</p>
                            <p class="mb-detail">YEAR</p>
                            <p class="detail-innermini mt-0">2015 - 2016</p>
                        </div>
                    </div>
                    <div class="col-md-6 kalpax-project-main">
                        <div class="kalpax-projectdetail-wrapper">
                            <p class="more-detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. text of the printing and typesetting industry. Lorem Ipsum has been</p>
                            <p class="more-detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. text of the printing and typesetting industry. Lorem Ipsum has been</p>
                            <p class="more-detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. text of the printing and typesetting industry. Lorem Ipsum has been</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container work-wrap">
                <div class="row">
                    <div class="col-md-6 med-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/1.jpg">
                                <img src="image/client/1.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6 med-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/2.jpg">
                                <img src="image/client/2.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-12 big-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/3.jpg">
                                <img src="image/client/3.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 small-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/4.jpg">
                                <img src="image/client/4.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 small-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/5.jpg">
                                <img src="image/client/5.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 small-poto-wrap">
                        <div class="item-client">
                            <a class="popup-image gallery-link" href="image/client/6.jpg">
                                <img src="image/client/6.jpg" alt="client" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="paggination" class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="prev">
                            <a href="#">— Previous Project</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="next">
                            <a href="#">Next Project —</a>
                        </div>
                    </div>
                </div>
                <div class="row mt-5 clientlist">
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="400">
                        <a href="#">
                            <img src="./image/client/1.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="450">
                        <a href="#">
                            <img src="./image/client/2.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="500">
                        <a href="#">
                            <img src="./image/client/3.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="550">
                        <a href="#">
                            <img src="./image/client/1.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="600">
                        <a href="#">
                            <img src="./image/client/5.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="650">
                        <a href="#">
                            <img src="./image/client/6.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="700">
                        <a href="#">
                            <img src="./image/client/3.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="750">
                        <a href="#">
                            <img src="./image/client/5.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2" data-aos="fade-in" data-aos-delay="800">
                        <a href="#">
                            <img src="./image/client/4.png" alt="client" />
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- END PROJECT SINGLE CONTENT PAGE SECTION -->
        <!-- FOOTER CONTENT PAGE SECTION -->
        <footer id="kalpax-footer-wrap" class="pt-5">
            <div class="container pt-5">
                <div class="row">
                    <div id="kalpax-contactfooter" class="col-sm-12 col-md-6">
                        <h6>Get intouch —</h6>
                        <p class="addr">
                            4633 Poplar Avenue street Pine Valley CA California 92062 USA
                        </p>
                        <p class="icon"><i class="fa fa-envelope-o"></i> example@test.com</p>
                        <p class="icon"><i class="fa fa-phone"></i> +619-473-4359</p>
                    </div>
                    <div class="col-xs-6 col-md-3 mt-4 kalpax-morefooter  col-6">
                        <h6>Find me on —</h6>
                        <ul class="footer-links">
                            <li>
                                <a href="#" class="link-km">Instagram</a>
                            </li>
                            <li>
                                <a href="#" class="link-km">LinkedIn</a>
                            </li>
                            <li>
                                <a href="#" class="link-km">Behance</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-md-3 mt-4 kalpax-morefooter  col-6">
                        <h6>Quick Links —</h6>
                        <ul class="footer-links">
                            <li><a href="#" class="link-km">About Me</a></li>
                            <li><a href="#" class="link-km">Contact</a></li>
                            <li><a href="#" class="link-km">Project</a></li>
                        </ul>
                    </div>
                </div>
                <hr />
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-6 col-xs-12 ">
                        <p class="copyright-text">Miun &copy; 2025 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- END FOOTER CONTENT PAGE SECTION -->
        <!-- GO TO TOP INDICATOR -->
        <a href="#" class="goup"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
    </main>
    <!-- END MAIN WRAP PAGE -->
    <!-- JQUERY -->
    <script src="javascript/jquery.js"></script>
    <!-- JQUERY EASING -->
    <script src="javascript/easing.js"></script>
    <!-- BOOTSTRAP JS -->
    <script src="javascript/bootsrtap.min.js"></script>
    <!-- PARALLAX JS -->
    <script src="javascript/parallax.js"></script>
    <!-- PARTICLE JS -->
    <script src="javascript/particle.js"></script>
    <!-- CIRCLEFULL JS -->
    <script src="javascript/circlefull.js"></script>
    <!-- AOS JS -->
    <script src="javascript/aos.js"></script>
    <!-- ISOTOPE JS -->
    <script src="javascript/isotope.js"></script>

    <!-- jarralax JS -->
    <script src="javascript/jarallax.js"></script>
    <!-- jqueryvalidation JS -->
    <script src="javascript/jqueryvalidation.js"></script>
    <!-- magnific JS -->
    <script src="javascript/magnific.js"></script>
    <!-- OWL CAROUSEL JS -->
    <script src="javascript/owl.carousel.min.js"></script>
    <!-- MAIN JS -->
    <script src="javascript/main.js"></script>
</body>

</html>